<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | 打印发票</title>

  <!-- 离线 Google 字体: Source Sans Pro -->
  <link rel="stylesheet" th:href="@{/css/googleapis/google.css?family=Source+Sans+Pro:300,400,400i,700&display=fallback}">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
  <!-- 主题样式 -->
  <link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
</head>
<body>
<div class="wrapper">
  <!-- 主体内容 -->
  <section class="invoice">
    <!-- title row -->
    <div class="row">
      <div class="col-12">
        <h2 class="page-header">
          <i class="fas fa-globe"></i> AdminLTE, Inc.
          <small class="float-right">日期： 2/10/2014</small>
        </h2>
      </div>
      <!-- /.col -->
    </div>
    <!-- info row -->
    <div class="row invoice-info">
      <div class="col-sm-4 invoice-col">
        从
        <address>
          <strong>Admin, Inc.</strong><br>
          福尔索姆大街795号，600号套房<br>
          旧金山，CA 94107<br>
          电话： (804) 123-5432<br>
          邮箱： info@almasaeedstudio.com
        </address>
      </div>
      <!-- /.col -->
      <div class="col-sm-4 invoice-col">
        到
        <address>
          <strong>John Doe</strong><br>
          福尔索姆大街795号，600号套房<br>
          旧金山，CA 94107<br>
          电话： (555) 539-1037<br>
          邮箱： john.doe@example.com
        </address>
      </div>
      <!-- /.col -->
      <div class="col-sm-4 invoice-col">
        <b>发票 #007612</b><br>
        <br>
        <b>订单号：</b> 4F3S8J<br>
        <b>付款截止：</b> 2/22/2014<br>
        <b>帐户：</b> 968-34567
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->

    <!-- Table row -->
    <div class="row">
      <div class="col-12 table-responsive">
        <table class="table table-striped">
          <thead>
          <tr>
            <th>数量</th>
            <th>商品</th>
            <th>序列号 #</th>
            <th>描述</th>
            <th>小计</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>1</td>
            <td>使命召唤</td>
            <td>455-981-221</td>
            <td>一个无速度限制，无规则的赛车世界</td>
            <td>$64.50</td>
          </tr>
          <tr>
            <td>1</td>
            <td>极品飞车 4</td>
            <td>247-925-726</td>
            <td>一个无速度限制，无规则的赛车世界</td>
            <td>$50.00</td>
          </tr>
          <tr>
            <td>1</td>
            <td>怪兽 DVD</td>
            <td>735-845-642</td>
            <td>忙碌的街头艺术大师</td>
            <td>$10.70</td>
          </tr>
          <tr>
            <td>1</td>
            <td>蓝光电影</td>
            <td>422-568-642</td>
            <td>蓝光电影的分辨率可达 1080P</td>
            <td>$25.99</td>
          </tr>
          </tbody>
        </table>
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->

    <div class="row">
      <!-- 接受付款栏 -->
      <div class="col-6">
        <p class="lead">付款方式：</p>
        <img th:src="@{/img/credit/visa.png}" alt="Visa">
        <img th:src="@{/img/credit/mastercard.png}" alt="万事达">
        <img th:src="@{/img/credit/american-express.png}" 美国运通>
        <img th:src="@{/img/credit/paypal2.png}" alt="贝宝">

        <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
          那帮家伙——那帮贪生怕死的人渣，兵痞中的破落户， plugg dopplr
          我的汗毛直竖，我也有点发痒，这跟美械无关。
        </p>
      </div>
      <!-- /.col -->
      <div class="col-6">
        <p class="lead">付款截止 2/22/2014</p>

        <div class="table-responsive">
          <table class="table">
            <tr>
              <th style="width:50%">小计：</th>
              <td>$250.30</td>
            </tr>
            <tr>
              <th>税率 (9.3%)</th>
              <td>$10.34</td>
            </tr>
            <tr>
              <th>运费：</th>
              <td>$5.80</td>
            </tr>
            <tr>
              <th>合计：</th>
              <td>$265.24</td>
            </tr>
          </table>
        </div>
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </section>
  <!-- /.content -->
</div>
<!-- ./wrapper -->
<!-- 特定页面脚本 -->
<script>
  window.addEventListener("load", window.print());
</script>
</body>
</html>
